<template>
    <div class="login">
        <div class="login-container">
            <div class="login-title">
                登录
            </div>
            <ElForm>
                <ElFormItem>
                    <el-icon size="30" style="margin-right: 15px;">
                        <User />
                    </el-icon>
                    <ElInput v-model="loginData.username" placeholder="请输入用户名"
                        style="width: 400px; height: 50px; font-size: 15px;margin-bottom: 10px;" />
                </ElFormItem>
                <ElFormItem>
                    <el-icon size="30" style="margin-right: 15px;">
                        <Lock />
                    </el-icon>
                    <ElInput v-model="loginData.password" type="password" placeholder="请输入密码"
                        style="width: 400px; height: 50px; font-size: 15px;margin-bottom: 10px;" />
                </ElFormItem>
            </ElForm>
            <div class="login-button">
                <el-button type="primary" size="large" @click="hdlLogin">登录</el-button>
                <el-button type="warning" size="large" @click="router.push('/')">回到首页</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { useUserStore } from '../stores/login';

const loginData = reactive({
    username: '',
    password: '',
})

const userStore = useUserStore()

function hdlLogin() {
    // 检查本地存储是否有userData
    const userDataString = localStorage.getItem('userData')
    if (userDataString) {
        const userData = JSON.parse(userDataString) // 将字符串转换为对象
        if (userData.username === loginData.username && userData.password === loginData.password) {
            router.push('/todo')
            ElMessage.success('登录成功')
        } else {
            ElMessage.error('用户名或密码错误')
            return
        }
    } else {
        // 保存用户信息
        userStore.setLoginInfo(loginData.username, loginData.password)
        router.push('/todo')
        ElMessage.success('登录成功')
    }
}

</script>

<style scoped lang="scss">
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 98vh;
    // background-color: skyblue;

    .login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // background-color: rgb(232, 48, 238);
        width: 40%;
        height: 50%;
        border-radius: 10px;

        .login-title {
            display: flex;
            font-size: 40px;
            margin-bottom: 25px;
            // background-color: yellow;

        }

        .login-button {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .el-button {
            width: 200px;
            height: 50px;
            margin-top: 60px;
        }

    }
}
</style>